<template>
	<div style="padding: 20px;">
		<el-form :model="form" inline>
			<el-form-item>
				<el-input  v-model="form.title" placeholder="试卷名称"></el-input>
			</el-form-item>
			<el-button icon="el-icon-search" circle @click="getPaper"></el-button>
			<el-button @click="showAddPaper=true">添加试卷</el-button>
		</el-form>
		<el-table :data="tableData" border>
			<el-table-column align="center" prop="id" label="编号"></el-table-column>
			<el-table-column align="center" prop="paperName" label="试卷名称"></el-table-column>
			<el-table-column align="center" prop="time" label="考试时间"></el-table-column>
			<el-table-column align="center" prop="courseName" label="考试科目"></el-table-column>
			<el-table-column align="center" prop="isStart" label="是否开始">	\
			 <template slot-scope="scope">
			    <el-tag size="medium">{{ scope.row.isStart==0? "未開始":scope.row.isStart==1? "考試中":"已結束" }}</el-tag>
			 </template>
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					<div v-if="scope.row.isStart==0">
						<el-button @click="()=> {getSelectTest(scope.row);getOptions();dialogFormVisible=true}">编辑试卷</el-button>
						<el-button  type="success" @click="startTest(scope.row)">開始考試</el-button>
					</div>
				   <el-button type="warning" v-else-if="scope.row.isStart==1">考試中</el-button>
				   <el-button type="info" v-else>考試已結束</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="padding: 10px 0">
		  <el-pagination
		  v-if="total>0"
		    @size-change="search"
		    @current-change="search"
		    :current-page="pageNum"
		    :page-sizes="[2, 5, 10, 20]"
		    :page-size="pageSize"
		    layout="total, sizes, prev, pager, next, jumper"
		    :total="total"
		  >
		  </el-pagination>
		</div>
		
		<el-dialog title="试题编辑"  :visible.sync="dialogFormVisible" @close="close" width="40%">
			<div>
				<el-form :model="optionsForm" inline>
					<el-form-item>
						<el-input  v-model="optionsForm.title" placeholder="試題内容"></el-input>
					</el-form-item>
					<el-button icon="el-icon-search" circle @click="getOptions"></el-button>
				</el-form>
				<el-table :data="options" border ref="multipleTable"  @selection-change="handleSelectionChange"  row-key="id">
					  <el-table-column
					      type="selection"
					      width="55"
						   reserve-selection>
					    </el-table-column>
					<el-table-column align="center" prop="id" label="编号"></el-table-column>
					<el-table-column align="center" prop="content" label="試題内容"></el-table-column>
					<el-table-column align="center" prop="answer" label="正確答案"></el-table-column>
					<el-table-column align="center" label="可選答案">
						<el-table-column align="center" prop="a" label="A">
						</el-table-column>
						<el-table-column align="center" prop="b"  label="B">
						</el-table-column>
						<el-table-column align="center" prop="c"  label="C">
						</el-table-column>
						<el-table-column align="center" prop="d"  label="D">
						</el-table-column>
					</el-table-column>
				</el-table>
				<el-pagination
				v-if="optionsTotal>0"
				  @size-change="getOptions"
				  @current-change="getOptions"
				  :current-page.sync="optionsNum"
				  :page-sizes="[2, 5, 10, 20]"
				  :page-size.sync="optionsSize"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="optionsTotal"
				>
				</el-pagination>
			</div>
		<div slot="footer" class="dialog-footer">
		      <el-button @click="dialogFormVisible = false">取 消</el-button>
		      <el-button type="primary" @click="saveTest">确 定</el-button>
		    </div>
		  </el-dialog>
		<el-dialog :visible.sync="showSelectCourse" title="选择考试课程" >
				<el-radio v-model="radio" :key="course.id" v-for="course in KaoshiS"  :label="course.id">{{course.courseName}}</el-radio>
				<div slot="footer" class="dialog-footer">
			      <el-button @click="showSelectCourse = false">取 消</el-button>
			      <el-button type="primary" @click="OkTest">确 定</el-button>
			    </div>
		</el-dialog>
		
		<el-dialog :visible.sync="showAddPaper" title="添加试卷">
			<el-form v-model="addPaper">
				<el-form-item label="试卷标题">
					<el-input v-model="addPaper.paperName"></el-input>
				</el-form-item>
				<el-form-item label="试卷时间">
					<el-input v-model="addPaper.time"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
			      <el-button @click="showAddPaper = false">取 消</el-button>
			      <el-button type="primary" @click="save">确 定</el-button>
			    </div>
		</el-dialog>
	</div>
</template>

<script>
import { Radio } from 'element-ui'
	export default {
		created(){
			this.getPaper()
		},
		data(){
			return{
				showAddPaper:false,
				addPaper:{},
				radio:0,
				showSelectCourse:false,
				paperId:0,
				optionsNum:1,
				optionsSize:10,
				optionsTotal:0,
				options:[],
				dialogFormVisible:false,
				form:{},
				optionsForm:{
					title:""
				},
				title:"",
				tableData:[],
				total:0,
				page:{
					pageSize:1,
					pageNum:10
				},
				multipleSelection:[],
				KaoshiS:[]
			}
		},
		methods:{
			OkTest(){
				//发起请求给所有有次课程的班级进行考试
				this.request.get("/paper/startTest/"+this.radio+"/"+this.paperId).then(resp=>{
					//开始考试
					this.showSelectCourse = false
				})
			},
			startTest(row){
				this.paperId = row.id
				//查询科目列表
				this.request.get("/courseNew").then(resp=>{
					this.KaoshiS = resp.data
					this.getPaper()
				})
				this.showSelectCourse = true
			},
			  toggleSelection(rows) {
			        if (rows) {
			          rows.forEach(row => {
			            this.$refs.multipleTable.toggleRowSelection(row);
			          });
			        } else {
			          this.$refs.multipleTable.clearSelection();  //清空选项，项目中：请求接口后，重新请求数据渲染页面的时候，使用此方式，清空选中勾选状态。
			        }
			      },
			      handleSelectionChange(val) {
			        this.multipleSelection = val;
			      },
			clickUpdatePaper(){
				this.getOptions();
				this.dialogFormVisible = true
			},
			getPaper(){
				this.request.get("/paper",{
					params:{
						pageSize:this.page.pageSize,
						pageNum:this.page.pageNum,
						title:this.form.title
					}
				}).then(resp=>{
					this.tableData = resp.data.records
					this.total = resp.data.total
				})
			},
			getOptions(){
				this.request.get("/test",{
					params:{
						pageSize:this.optionsSize,
						pageNum:this.optionsNum,
						title:this.optionsForm.title
					}
				}).then(resp=>{
					this.options = resp.data.records
					this.optionsTotal = resp.data.total
				})
			},
			saveTest(){
				//保存试题选择
				this.request.post("/paperTest/saveInfo/"+this.paperId,this.multipleSelection).then(resp=>{
					if(resp.code == 200){
						//保存成功
						this.$message({
							message:"保存完成",
							type:"success"
						})
						this.dialogFormVisible = false
					}
				})
			},
			getSelectTest(row){
					//给paperId赋值
				this.paperId = row.id
				this.multipleSelection = []
				// 获取该试卷已经选择的试题 传输参数为 试卷id
				this.request.get("/paperTest/getOption/"+this.paperId).then(resp=>{
					this.multipleSelection = resp.data
					this.toggleSelection(resp.data)
				})
			},
			close(){
				// 弹窗关闭时清除paperId值和选择试题的值
				this.paperId = 0,
				this.multipleSelection = []
				this.toggleSelection()
			},
			save(){
				this.request.post("/paper",this.addPaper).then(resp=>{
					this.addPaper = {}
					this.showAddPaper = false;
					this.$message({
						type:"success",
						message:"保存完成"
					})
					this.getPaper()
				})
			}
		}
	}
</script>

<style>
</style>